i want to add an Title Element below my Image Gallery created with PhotoSwipe. But my Title Element sticks not under the Image. It sticks to fast in the Image when Browser rescaling vertically.

JS to create the Element:

            lightbox.pswp.ui.registerElement({
                name: 'werkInformationen',
                className: 'smallWerkInformationen',
                appendTo: 'wrapper',
                onInit: (el, pswp) => {
                    var wrapDiv = document.createElement('div');
                    wrapDiv.className = 'wrapDiv';

                    var popUp = document.createElement('div');
                    popUp.className = 'popUpWerkInformationenTitle';
                    popUp.id = 'popUpWerkInformationenTitle';

                    var span = document.createElement('span');
                    span.className = 'child';
                    span.id = 'popUpWerkInformationenTitleSpan';
                    
                    wrapDiv.appendChild(popUp);
                    popUp.appendChild(span);

                    el.appendChild(wrapDiv);

                    pswp.on('change', (a,) => {
                        var paramsFromCurrentWerk = new URLSearchParams(lightbox.pswp.currSlide["data"]["src"]);
                        document.getElementById("popUpWerkInformationenTitleSpan").innerHTML = paramsFromCurrentWerk.get('id') + " | " + paramsFromCurrentWerk.get('werkName') + " | " + paramsFromCurrentWerk.get('material') + " | " + paramsFromCurrentWerk.get('kuenstler');
                    });
                }
            });

Output to HTML:

<div class="smallWerkInformationen pswp__hide-on-close">
    <div class="wrapDiv">
        <div class="popUpWerkInformationenTitle">
            <span class="child">PLACEHOLDER TEXT</span>
        </div>
    </div>
</div>

CSS:

.wrapDiv {
    min-width: 600px;
}

.smallWerkInformationen {
    position: relative;
}

#popUpWerkInformationenTitle {
    font-size: 12px;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    margin-bottom: 30px;
}

#popUpWerkInformationenTitleSpan {
    text-align: center;
    background-color: black;
    color: #fff;
    border-radius: 5px;
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 15px;
    font-size: 1rem !important;
    padding: 5px;
}

Expected Result until there is no space: Expected Result until there is no space

My Result:
There is enough Space to fit the Text Element below but it goes in the Image.

My Result